<script lang="ts" setup>
	import { ref } from "vue";
	import wContainer from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-container.vue'
	import wItem from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-item.vue'
	import {
		useRouter
	} from 'uni-mini-router';
	let router = useRouter();
	let props = defineProps(['listt'])
	console.log(props.listt);
	const routerLink = (id) => {
		router.push({
			name: 'rentDetail',
			params: {
				id,
			}
		})
	}
	//租赁的列表组件
</script>
<template>
	<view class="leaseRecommend">
		<view class="lGodosBox">
			<!-- <wContainer :columnNumber="2"> -->
			<view class="lGoods1" style="opacity: 1;" v-for="(item, index) in props.listt" :key="index"
				@click="routerLink(item.id)">
				<view class="">
					<image class="lImg1" :src="item.image"></image>
					<view class="lContent1">
						<view class="lcTit u-line-2">
							{{ item.name }}
						</view>
						<view class="lcPrice">
							<text class="price1 intFont"><text style="font-size: 20rpx;">￥</text>{{ item.price }}</text>
							<view class="lcPriceI r-flex-start-end intFont">
								<text>￥{{ item.vipPrice }}</text>
								<image src="http://image.qiniu.qdytcy.com/2023/7/12/vipTag.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </wContainer> -->
		</view>
	</view>
	<!-- <view class="leaseRecommend" @click="routerLink('rentDetail')">
		<view class="lGodosBox">
			<view class="lGoods" v-for="(item,index) in props.list">
				<image class="lImg" :src="item.image" mode=""></image>
				<view class="lContent">
					<view class="lcTit u-line-2">
						{{ item.name }}
					</view>
					<view class="lcPrice">
						<text>￥</text>
						<text>{{ item.price }}</text>
					</view>
					<view class="lcPriceI r-flex-start-end">
						<text>￥{{ item.vipPrice }}</text>
						<image src="http://image.qiniu.qdytcy.com/2023/7/12/vipTag.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view> -->
</template>
<style lang="scss" scoped>
	.leaseRecommend {
		// padding-bottom: 100rpx;


		.lGodosBox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.lGoods:last-child {
				padding-bottom: 150rpx;
			}

			.lGoods1 {
				width: 328rpx;
				// height: 492rpx;
				margin: 10rpx 0;
				background: #FFFFFF;
				box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 8rpx;
				padding-bottom: 32rpx;

				.lImg1 {
					width: 100%;
					height: 328rpx;
				}

				.lContent1 {
					// height: 190rpx;
					padding: 0 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.lcTit {
						// height: 62rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.lcPrice {
						margin: 10rpx 0;

						.price1 {
							color: red;
							font-size: 36rpx;
						}

						.lcPriceI {
							text:nth-child(1) {
								color: #000;
								font-size: 24rpx;
								margin-right: 10rpx;
							}

							image {
								width: 60rpx;
								height: 28rpx;
							}
						}
					}
				}
			}
		}
	}
</style>